<template>
  <div class>
    <naviHeader></naviHeader>

    <div class="header">
      <div class="title-container">
        <div class="title">签到领积分</div>
        <router-link to="/integralRecord">
          <div class="btn">我的积分</div>
        </router-link>
      </div>

      <div class="figure">
        <div>
          <div class="sign-plane">
            <div>
              <div class="btn">签到</div>
              <div>连续签到15天奖励50积分</div>
            </div>
          </div>

          <!-- <div class="integral"><span>{{integral}}</span> 积分</div>
          <router-link to="/integralList">
            <div class="btn">排行榜</div>
          </router-link>-->
        </div>
      </div>
    </div>

    <div>
      <div class="calendar">
        <!-- 年份 月份 -->
        <div>
          <ul class="month">
            <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
            <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
            <li class="year-month" @click="pickYear(currentYear,currentMonth)">
              <span class="choose-year">{{ currentYear }}</span>
              <span class="choose-month">{{ currentMonth }}月</span>
            </li>
            <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
          </ul>
        </div>
        <!-- 星期 -->
        <ul class="weekdays">
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li style="color:red">六</li>
          <li style="color:red">日</li>
        </ul>
        <!-- 日期 -->
        <ul class="days">
          <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
          <li v-for="dayobject in days" :key="dayobject.index">
            <!--本月-->
            <!--如果不是本月  改变类名加灰色-->
            <span
              v-if="dayobject.day.getMonth()+1 != currentMonth"
              class="other-month"
            >{{ dayobject.day.getDate() }}</span>

            <!--如果是本月  还需要判断是不是这一天-->
            <span v-else>
              <!--今天  同年同月同日-->
              <span
                v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
                class="active"
              >{{ dayobject.day.getDate() }}</span>
              <span v-else>{{ dayobject.day.getDate() }}</span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
export default {
  data() {
    return {
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      days: []
    };
  },
  created: function() {
    //在vue初始化时调用
    this.initData(null);
  },
  components: {
    naviHeader
  },
  methods: {
    initData: function(cur) {
      var leftcount = 0; //存放剩余数量
      var date;

      if (cur) {
        date = new Date(cur);
      } else {
        var date = new Date();
      }

      this.currentDay = date.getDate();
      this.currentYear = date.getFullYear();
      this.currentMonth = date.getMonth() + 1;

      this.currentWeek = date.getDay(); // 1...6,0
      if (this.currentWeek == 0) {
        this.currentWeek = 7;
      }

      var str = this.formatDate(this.currentYear, this.currentMonth, 1);

      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个
      //初始化本周
      for (var i = this.currentWeek - 1; i >= 0; i--) {
        var d = new Date(str);
        d.setDate(d.getDate() - i);
        var dayobject = {}; //用一个对象包装Date对象  以便为以后预定功能添加属性
        dayobject.day = d;
        this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
      }
      //其他周
      for (var i = 1; i <= 5 * 7; i++) {
        var d = new Date(str);
        d.setDate(d.getDate() + i);
        var dayobject = {};
        dayobject.day = d;
        this.days.push(dayobject);
      }
    },
    pickPre: function(year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickNext: function(year, month) {
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(35);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    pickYear: function(year, month) {
      alert(year + "," + month);
    },

    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function(year, month, day) {
      var y = year;
      var m = month;
      if (m < 10) m = "0" + m;
      var d = day;
      if (d < 10) d = "0" + d;
      return y + "-" + m + "-" + d;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.header {
  background: #fff;

  .title-container {
    height: 1.2rem;
    line-height: 1.2rem;
    border-bottom: 2px solid #f1f1f1;

    .title {
      @include sc(0.4rem, #000);
      float: left;
      margin-left: 2.7rem;
    }

    .btn {
      float: right;
      margin-right: 0.3rem;
    }
  }

  .figure {
    @include fj(center);
    align-items: center;
    height: 4rem;

    .btn {
      width: 2rem;
      height: 1rem;
      line-height: 1rem;
      background: #888;
      color: #fff;
      border-radius: 25px;
      text-align: center;
      margin: 0.1rem auto;
    }
  }
}

.calendar {
  width: 7.5rem;
  background: #fff;
  margin: 0 auto;
  border-top: 2px solid #f1f1f1;

  .month {
    @include fj(space-between);
    align-items: center;
    text-align: center;
    height: 1rem;

    .arrow {
      width: 0.6rem;
      height: 0.6rem;
      background: #16e08f;
      color: #fff;
      line-height: 0.6rem;
      margin: 0.1rem;
      border-radius: 25px;
    }
  }

  .weekdays {
    @include fj(space-between);
    align-items: center;
    text-align: center;
    background: #16e08f;
  }

  .weekdays > li {
    @include sc(0.28rem, #fff);
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
  }

  .days {
    @include fj(space-between);
    align-items: center;
    text-align: center;
    // background: #16e08f;
    flex-wrap: wrap;
  }

  .days > li {
    @include sc(0.28rem, #fff);
    width: 1rem;
    height: 0.8rem;
    line-height: 0.8rem;
  }

  .other-month {
    @include sc(0.26rem, #999);
  }

  .active {
    width: 1rem;
    height: 1rem;
    border-radius: 25px;
    background: #16e08f;
    padding: 0.1rem;
    color: #fff;
  }
}
</style>
